<template>
  <div class="page pettySavings-list">
    <div class="scroll-view">
      <customHeader
        middleTitle="会员储值"
        @leftCallBack="goBack"
      />
      <searchBar @search="searchCallbck" placeholder="请输入门店名称" />
      <ul class="tabList">
        <li
          v-for="(item,index) in tabList"
          :key="index"
          @click="tabSelect(index)"
          :class="{active:tabIndex===index}"
        >{{item}}</li>
      </ul>
      <div class="page-body">
        <div class="section" :style="{ height:'100%' }">
          <no-data msg="暂无数据" v-if="!loading&&list.length==0"></no-data>
          <ul
            class="list"
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="30"
          >
            <li
              v-for="(item,index) in list"
              :key="index"
              @click="linkToDetail(item.couponActivityId)"
            >
              <div class="wrap">
                <div class="left-icon">
                  <img :src="imgFormate(item.couponLogo)" alt />
                </div>
                <div class="right-data">
                  <div class="shop-name">{{item.activityName}}</div>
                  <div
                    class="data-time"
                  >{{item.activityType===0&&item.shopList&&item.shopList.length>0?item.shopList[0].shopName:"全部门店"}}</div>
                </div>
                <i class="zhk-list_rarrow"></i>
              </div>
            </li>
          </ul>
          <p v-show="loading" class="page-infinite-loading">
            <mt-spinner :style="{display:'inline-block'}" type="fading-circle"></mt-spinner>
          </p>
          <div v-show="noMore&&!loading&&list.length!==0" class="no-more">
            <span>已经全部加载完毕</span>
          </div>
        </div>
      </div>
      <div class="btn" v-if="auth" @click="linkToCreate">创建活动</div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import searchBar from "../../components/searchBar/searchBar";
import noData from "../../components/noData/noData";
import jsBridge from "../../tools/jsBridge.js";
import jsAuthority from "../../tools/jsAuthority.js";
import config from "../../base/profile/config.json";
import { Toast } from "mint-ui";

export default {
  name: "pettySavingsList",
  data() {
    return {
      auth:false,
      tabList: ["进行中", "已停用"],
      tabIndex: 0,
      pageSize: 20,
      nextPage: 1,
      loading: false,
      noMore: false,
      searchParam: {
        shopName: "",
      },
      list: [
        // {
        //   supplierId: "商户id",
        //   couponActivityId: "活动id",
        //   activityName: "活动名称",
        //   couponLogo: "卡券logo",
        //   activityType: 0,// 活动类型  0单店活动  1商户活动
        //   activityStatus: "活动状态（ 0 = 未知， 10 = 未开始， 12 = 进行中， 21 = 已停用）",
        //   shopList: [{
        //     shopId: "门店id",
        //     shopName: "门店名称"
        //   }
        //   ],
        // }
      ]
    }
  },

  methods: {
    goBack() {
      this.$router.push({ path: "/memberStoredDataStatistics"});
    },
    tabSelect(index) {
      this.tabIndex = index;
      this.loadData(1);
    },
    linkToDetail(couponActivityId) {
      this.$router.push({ path: "/pettySavings/details", query: { couponActivityId: couponActivityId } });
    },
    linkToCreate() {
      this.$router.push({ path: "/pettySavings/add", query: { type:"add" } });
    },
    searchCallbck(v) {
      this.searchParam.shopName = v;
      this.loadData(1);
    },
    imgFormate(url) {
      return CommonUtil.imgUrlFormate(url, config.previewUrlPrefix);
    },
    loadData(currentPage) {
      if (currentPage == 1) {
        this.list = [];
      }
      let activityStatus = this.tabIndex==0 ? 12 : 21;
      this.loading = true;
      this.ajax({
        url: `/newapp/deposit/getDepositCardActivityList.do?currentPage=${currentPage}&pageSize=${this.pageSize}&shopName=${this.searchParam.shopName}&activityStatus=${activityStatus}`,
        type: "get",
        controlLoading: false,
      })
        .then(res => {
          this.loading = false;
          this.noMore = false;
          if (res.success) {
            const data = res.resultObject;
            //最后一页将noMore设置为true
            if (data != null && data.dataList && data.dataList.length > 0) {
              this.list = this.list.concat(data.dataList);
              if (this.list.length < data.dataAllCount) {
                this.nextPage = data.nextPage;
              } else {
                this.noMore = true;
              }
            } else {
              this.noMore = true;
            }
          } else {
            this.noMore = true;
            Toast(res.msg);
          }
        })
        .catch(err => {
          this.loading = false;
          this.noMore = true;
        });
    },
    //无限加载
    loadMore() {
      if (this.loading || this.noMore) {
        return;
      }
      this.loadData(this.nextPage);
    },
    
  },
  created() {
    // jsAuthority.checkedSuccess(() => {
    //   this.auth = jsAuthority.checked(
    //     "app.duizhangdan.jsztQuery"
    //   );
    // });
     CommonUtil.getUserInfo().then(data => {
      if(data.role=="1") {
        this.auth=true;
        // this.getStatus();
      }
    });
  },
  components: {
    customHeader,
    searchBar,
    noData,
  }
};
</script>
<style lang='scss' scoped>
@import "pettySavings";
</style>
